<template>
    <div class="yonghu">
        <div class="box">
            <div class="pre-box" ref="qiehuan" v-show="zhuangtai==1">
                <h1>welcome</h1>
                <p>高考志愿辅助系统</p>
                <div class="img-box">
                    <img src="../assets/img01.png" alt="">
                </div>
            </div>
            <div class="register-from">
                <div class="table-box">
                    <h1>
                        register
                    </h1>
                </div>
                <el-form ref="form" :model="rform">
                    <el-form-item>
                        <el-input v-model="rform.loginName" type="text" placeholder="请输入账号" class="registry_pass2"></el-input>
                        <el-input  v-model="rform.phone" type="text" placeholder="请输入手机号" class="registry_pass2"></el-input>

                    </el-form-item>
                    <el-input v-model="rform.username" type="text" placeholder="请输入用户名" class="registry_id2"></el-input>

                    <el-input v-model="rform.password" type="password" placeholder="请输入密码" class="registry_yz2"></el-input>
                    <!-- `checked` 为 true 或 false -->
                    <el-form-item>
                    </el-form-item>
                    <button type="submit" class="Submit2" @click.prevent="submitForm1('form')">注册</button>
                    <button class="Retrieve2" @click.prevent="clickto()">登录</button>
                </el-form>
            </div>
            <div class="login-from">
                <div class="table-box">
                    <h1>
                        login
                    </h1>
                </div>
                <el-form ref="form" :model="form">
                    <el-form-item>
                        <el-input v-model="form.username" type="text" placeholder="请输入账号" class="registry_id">
                        </el-input>
                    </el-form-item>
                    <el-input v-model="form.password" type="password" placeholder="请输入密码" class="registry_pass">
                    </el-input>
                    <!-- <el-input v-model="form.validateCode" type="text" placeholder="请输入验证码" class="registry_yz">
                    </el-input> -->
                    <!-- `checked` 为 true 或 false -->
                    <!-- <div class="agree">
                        <el-checkbox v-model="form.rememberMe" class="agreement">记住密码</el-checkbox>
                        <img class="cap" :src= "ImageCode" ref="captcha" @click="getCaptcha()"
                            alt="点击更换验证码">
                    </div> -->
                    <button type="submit" class="Submit" @click.prevent="submitForm('form')">登录</button>
                    <button class="Retrieve" @click="clickto()">注册</button>
                </el-form>
                <button type="submit" style="position: relative; left: 8px;" class="Submit" @click.prevent="$router.replace('/')">返回</button>

            </div>
        </div>
    </div>
</template>
<script>
import Vue from "vue";
import Fcee_url from "../js/fceeConfig"
Vue.prototype.$Fcee_url = Fcee_url//引入全局变量地址
export default {
    
    name: 'yonghu',
    data() {

        return {
            one: true,
            ImageCode: "/captcha/captchaImage?type=char",
            form: {
                username: '',
                password: '',
                validateCode: '',
                rememberMe: true,
                phone:null
                // userName:'',
                // passWord:''
            },
            rform:{
                loginName: "",
                userName: "",
                password: ""
            }
            ,zhuangtai:1
        }

    },
    methods: {

        clickto() {
            let falg = this.one;
            if (falg == true) {
                this.$refs.qiehuan.style.transform = "translateX(100%)"
                this.$refs.qiehuan.style.backgroundColor = "#9ce0ed"
                this.one = false
            } else {
                this.$refs.qiehuan.style.transform = "translateX(0%)"
                this.$refs.qiehuan.style.backgroundColor = "#edd4dc"
                this.one = true
            }
        },
        getCaptcha(event) {
            console.log("点击")
            this.$refs.captcha.src ='/captcha/captchaImage?type=char'
            console.log(this.$Fcee_url)
        },
        submitForm(formName) {
            var self = this;
            // let data = new FormData()
            // 'Content-Type': 'application/x-www-form-urlencoded'
            this.$refs[formName].validate((valid) => {
                var axios = require('axios');
                var data = new FormData();
                data.append('username', self.form.username);
                data.append('password', self.form.password);
                data.append('validateCode', self.form.validateCode);
                data.append('rememberMe', self.form.rememberMe);
                // axios.defaults.headers.post['Content-Type'] = 'Content-Type: application/x-www-form-urlencoded; charset=UTF-8'
                console.log(this.form.validateCode)
                var config = {
                    method: 'post',
                    url: '/login',
                    headers: {
                        'Content-Type': 'application/x-www-form-urlencoded'

                    },
                    data: data,
                    withCredentials: false


                };
                console.log(Fcee_url.url)
                axios(config)
                    .then(function (response) {
                        console.log(JSON.stringify(response.data));
                        if (response.data.code == 0) {
                            alert("登录成功")
                            self.$router.replace("/");
                        }
                        else {
                            alert("登录失败:" + response.data.msg);
                        }
                    })
                    .catch(function (error) {
                        console.log(error);
                    });

            });
        },
        submitForm1(formName){
            var that = this;
            that.$refs[formName].validate((valid)=>{
                var axios=require('axios');
                // var data1= new FormData();
                // data1.append('loginName',that.rform.loginName);
                // data1.append('userName',that.rform.userName);
                // data1.append('password',that.rform.passWord);
            var data = new FormData();
            data.append('loginName', that.rform.loginName);
            data.append('userName', that.rform.userName);
            data.append('password', that.rform.password);
                console.log(that.rform.loginName)
                console.log(that.rform.password)
                var config={
                    method:'post',
                    url:'/userInfo/Register',
                    data:data,
                    withCredentials: false
                };
                axios(config).then(function (response){
                    if (response.data.code == 0) {
                            alert("注册成功请登录")
                            that.clickto();
                            // self.$router.replace("/");
                        }
                        else {
                            alert("注册失败:" + response.data.msg);
                        }
                })
            })
        },
        yangshi: function () {
      let ww = window.innerWidth;
      this.width=ww;
      // console.log(ww);
      if (ww <= 800) {
        this.zhuangtai = 0;
      } else {
        this.zhuangtai = 1;
      }
    },
    },
    mounted() {
    this.yangshi();
    window.onresize = () => {
      this.yangshi();
    }
  },
  created() {
    this.info();
  }
}
</script>
<style scoped>
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;

}

.registry_pass{
    position: relative;
    left: 59px;
}

.Submit{
    position: relative;
    left: -240px;
    top: 54.5px;
}

.Retrieve{
    position: relative;
    left: 80px;
}

.yonghu {
    height: 100vh;
    overflow-x: hidden;
    display: flex;
    background: linear-gradient(to right, pink, skyblue);
}

.box {
    position: relative;
    width: 1050px;
    height: 600px;
    display: flex;
    background-color: white;
    margin: auto;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.6);
    box-shadow: 4px 4px 3px rgba(0, 0, 0, 0.1);
}

.register-from,
.login-from {
    flex: 1;
    height: 100%;
}

.table-box {
    height: 200px;
    line-height: 300px;
}

.table-box h1 {
    text-align: center;
    letter-spacing: 5px;
}

.el-from {
    display: flex;
    height: 180px;
    flex-direction: column;
    align-items: center;
    z-index: 0;
}

.agree {
    width: 60%;
    height: 70px;
}

.cap {
    display: block;
    flex-direction: column;
    height: 30px;
    float: right;
    width: 80px;
}

.agreement {
    display: block;
    float: left;
    height: 30px;
    width: 80px;
    line-height: 30px;
    margin-left: 34%;
    flex-direction: column;
    align-items: center;
}

.el-input {
    width: 60%;
    height: 40px;

    margin-bottom: 20px;
    /* text-indent: 4px; */
    border: 1px solid #b0cfe9;
    border-radius: 4px;
    z-index: 0;
}

.el-input:focus {
    outline: none;
}

.btn-box {
    display: flex;
    justify-content: center;
    height: 100px;
}

button {
    width: 100px;
    height: 30px;
    border: none;
    background-color: #69b3f0;
    line-height: 30px;
    border-radius: 4px;
    margin: 0 7px;
    color: white;
}

button:hover {
    cursor: pointer;
    opacity: .8;
}

.btn-box p {
    height: 30px;
    line-height: 30px;
    font-size: 14px;
}

.pre-box {
    position: absolute;
    background-color: #edd4dc;
    width: calc(1050px /2);
    left: 0;
    top: 0;
    height: 100%;
    box-shadow: 4px 4px 3px rgba(0, 0, 0, 0.1);
    border-radius: 8px;
    transition: 1s ease-in-out;
    z-index: 1;
}

.pre-box h1 {
    margin-top: 150px;
    text-align: center;
    letter-spacing: 5px;
    text-shadow: 4px 4px 3px rgba(0, 0, 0, 0.1);
    height: 40px;
    color: white;
}

.pre-box p {
    height: 30px;
    line-height: 30px;
    margin: 20px 0;
    font-weight: bold;
    text-shadow: 4px 4px 3px rgba(0, 0, 0, 0.1);
    color: white;
}

.img-box {
    width: 200px;
    height: 200px;
    margin: 20px auto;
    border-radius: 50%;
    overflow: hidden;
    box-shadow: 4px 4px 3px rgba(0, 0, 0, 0.1);
}

.img-box img {
    width: 100%;
}
</style>